<template>
  <div class="typhoon-box" style="padding: 20px;">
    <div
      style="text-align: center;color: #fff;font-weight: 700;font-size: 24px;margin-bottom: 30px;display: flex;justify-content: space-between;">
      <div class="conf" @click="openTargetPage(typhoonData.dataCenterName)">{{ typhoonData.countryNameCn }}网络层详细信息</div>
      <i class="el-icon-close" style="cursor: pointer;" @click="closeInfo2"></i>
    </div>
    <!-- {{ typhoonData }} -->
    <div class="container">
      <div class="box">
        <div style="position: absolute;margin: 10px 0 0 10px;">端口</div>
        <div class="echart" id="mychart" :style="myChartStyle"></div>
      </div>
      <div class="box">
        <div style="position: absolute;margin: 10px 0 0 10px;">协议</div>
        <div class="server-data">
          <div v-for="(value, key) in protocolData" :key="key" class="data-item">
            <div>{{ value.protocol }}</div>
            <div style="color: #73c0de;">{{ value.protocolCount }}</div>
          </div>
        </div>
      </div>
      <div class="box">
        <div style="position: absolute;margin: 10px 0 0 10px;">Server</div>
        <div class="echart" id="mychartCircle" :style="myChartStyle"></div>
      </div>
      <div class="box">
        <div style="position: absolute;margin: 10px 0 0 10px;">IP段</div>

        <div class="echart" id="mychartIp" :style="myChartStyleIp"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "TyphoonInfo",
  data() {
    return {
      xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
      yData: [23, 24, 18, 25, 27, 28, 25], //数据
      myChartStyle: { width: "100%", height: "200px" }, //图表样式
      myChartStyleIp: { width: "100%", height: "260px" }, //图表样式
      pieData: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      centerName: '',
      protocolData: []
    };
  },
  watch: {
    'typhoonData': {
      deep: true,
      handler(newVal, oldVal) {
        // 当 typhoonData 更新时调用
        this.initEcharts();
        this.initEchartsCircle();
        this.initEchartsIp();
        this.protocolList();
      }
    }
  },
  props: {
    typhoonData: Object,
    closeInfo2: Function
  },
  methods: {
    openTargetPage(obj) {
      window.open(`/assetlist?dataCenterName=${obj}`, '_self')
    },

    initEcharts() {
      console.log(`output->typhoonData得到点`, this.typhoonData)
      // 基本柱状图
      console.log(this.typhoonData)
      let data = this.typhoonData.portSort
      let keys = [];
      let values = [];

      // for (let key in data) {
      //   if (data.hasOwnProperty(key)) {
      //     keys.push(key);
      //     values.push(data[key]);
      //   }
      // }
      // console.log(`output->1`,keys,values)
      data.forEach(res => {
        keys.push(res['port'])
        values.push(res['portCount'])
      })
      const option = {
        xAxis: {
          data: keys,
          axisLabel: {
            interval: 0, // 0 表示显示所有标签，您可以调整这个值来控制显示间隔
            fontSize: 10
          },
        },
        yAxis: {
          show: false
        },
        series: [
          {
            type: "bar", //形状为柱状图
            data: values,
            barWidth: '12px',
            itemStyle: {
              normal: {
                // 这里可以设置颜色、边框等样式
                // 例如，为第一个柱子设置不同的颜色
                color: function (params) {
                  if (params.dataIndex <= 2) {
                    return 'red'; // 第一个柱子设置为红色
                  } else {
                    return '#fff'; // 第一个柱子设置为红色

                  }
                }
              }
            },
            label: {
              normal: {
                show: true, // 显示数值
                position: 'top', // 将数值放在柱子顶部
                color: '#fff',
                formatter: function (params) {
                  return params.value; // 显示数值
                }
              }
            }
          },
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    initEchartsIp() {
      // 基本柱状图
      let data = this.typhoonData.ipSort
      let keys = [];
      let values = [];
      let label = [];
      data.sort((a, b) => a.ipCount - b.ipCount);
      data.forEach((res, index) => {


        keys.push(res['ip'])
        values.push(res['ipCount'])
        label.push(res['ip'])

      })
      console.log(`output->`, keys, values)
      const option = {
        grid: {
          top: '40px',
          left: '10px', // 设置图表距离容器左侧的距离
          containLabel: true // 确保标签被包含在 grid 区域内
        },
        xAxis: {
          type: 'value', // 条形图的X轴为数值轴
          axisLabel: {
            interval: 0, // 显示所有标签
            fontSize: 10,
            color: '#fff'
          },
          splitLine: {
            show: false
          },
          axisTick: {
            // 这里设置的是坐标轴刻度的显示间隔，不是柱状图的间距
            interval: 10
          }
        },
        yAxis: {
          type: 'category', // 条形图的Y轴为类目轴
          data: keys, // Y轴显示类目数据
          show: true,
          axisLabel: {
            fontSize: 10,
            color: '#fff',

          },

        },
        series: [
          {
            type: "bar", //形状为柱状图
            data: values,
            barWidth: '16px',
            itemStyle: {
              normal: {
                // 这里可以设置颜色、边框等样式
                // 例如，为第一个柱子设置不同的颜色
                color: function (params) {
                  if (params.dataIndex <= 2) {
                    return 'green'; // 第一个柱子设置为红色
                  } else {
                    return 'green'; // 第一个柱子设置为红色

                  }
                }
              }
            },
            label: {
              normal: {
                show: true, // 显示数值
                // position: 'insideBottom', // 将数值放在柱子顶部

                //           rotate: 90,
                align: 'left',
                verticalAlign: 'middle',
                // position: 'right',
                // distance: 15,
                color: '#fff',
                fontSize: 9,
                formatter: function (params) {
                  console.log(`output->params`, keys)
                  return values[params.dataIndex]; // 显示数值
                }
              }
            }
          },
        ]
      };
      const myChart = echarts.init(document.getElementById("mychartIp"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    initEchartsCircle() {
      // 基本柱状图
      let data = this.typhoonData.severSort
      //  let keys = [];
      let values = [];
      data.forEach(res => {
        values.push({ value: res['count'], name: res['field'] })
      })


      console.log(`output->c`, values)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // orient: 'vertical', // 设置图例垂直排列
          left: 180, // 设置图例在容器右侧的位置，可以根据需要调整
          top: 'middle', // 设置图例垂直居中对齐
          textStyle: { // 设置图例文字的样式
            color: '#fff' // 设置图例文字颜色为红色
          },
          formatter: function (name) {
            // 截取前20个字符，如果超过20个字符则显示省略号
            return name.length > 13 ? name.substring(0, 13) + '...' : name;
          }
        },
        series: [
          {
            name: 'Server',
            type: 'pie',
            radius: ['56%', '60%'],
            data: values,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            //   emphasis: {
            //     label: {
            //       show: true,
            //       fontSize: 40,
            //       fontWeight: 'bold'
            //     }
            //   },
            labelLine: {
              show: false
            },
            left: '-120px'
          }
        ]
      };
      const myChart1 = echarts.init(document.getElementById("mychartCircle"));
      myChart1.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart1.resize();
      });
    },
    protocolList() {
      this.protocolData = this.typhoonData.protocolSort
      console.log(`output->this.protocolData `, this.protocolData)
    },
  },
  mounted() {
    this.initEcharts();
    this.initEchartsCircle();
    this.initEchartsIp();
  },
  created() {

    this.protocolList()
  },
};
</script>
<style lang="scss" scoped>
.conf {
  border-bottom: 1px solid white;
  cursor: pointer;
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
}

.conf:hover {
  color: #00B0FF;
  border-bottom: 1px solid #00B0FF;
}

.container {
  display: flex;
  /* 启用Flexbox布局 */
  flex-wrap: wrap;
  /* 允许换行 */
  justify-content: space-between;
  /* 使子元素在主轴上平均分布 */
}

.box {
  width: 48%;
  height: 200px;
  background-color: #00081ba7;
  /* 背景颜色，仅用于示例 */
  margin: 1%;

  .server-data {

    height: 163px;
    max-height: 163px;
    // overflow: auto;
    overflow: scroll;
    scrollbar-width: none; //隐藏滚动条  /* 适用于 Firefox */
    -ms-overflow-style: none;
    cursor: grab;
    margin-top: 35px;
    font-size: 14px;

    .data-item {
      // background: red;
      margin: 5px 10px;
      padding: 5px 0px;
      display: flex;
      justify-content: space-between;
    }

    .data-item:nth-child(2n) {
      background: #1d2846;
    }
  }
}
</style>